<template>
	<view class="index">
		<!-- 轮播图部分 -->
		<view class="uni-margin-wrap">
			<swiper
				class="swiper"
				circular
				:indicator-dots="movePic.indicatorDots"
				:autoplay="movePic.autoplay"
				:interval="movePic.interval"
				:duration="movePic.duration"
			>
				<swiper-item>
					<view class="swiper-item">就诊指南</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">听诊通知</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">医院导航</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">预约须知</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 门诊服务 -->
		<Tag title="门诊服务"></Tag>
		<view class="Outpatient" >
			<!-- 预约挂号 -->
			<view class="OutpatientService">
				<view class="OutpatientBox" @click="goDoctorChoose">
					<view class="content">
						<view class="text1">预约挂号</view>
						<view class="text2">在线预约挂号</view>
					</view>
					<view class="iconOut">
						<text class="iconfont icon-yuyueguahao"></text>
					</view>
				</view>
			</view>
			<!-- 在线充值 -->
			<view class="onine">
				<view class="onineBox" @click="goOnine">
					<view class="content">
						<view class="text1">在线充值</view>
						<view class="text2">就诊卡预存充值</view>
					</view>
					<view class="iconOut">
						<text class="iconfont icon-chongzhi"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="Outpatient-bottom">
			<view class="row-one">
				<!-- 候诊查询 -->
				<view class="box" @click="goWaitConsultation">
					<view class="iconfont icon-houzhenchaxun" style="color: #41a3f4;"></view>
					<text>候诊查询</text>
				</view>
				<!-- 自助缴费 -->
				<view class="box" @click="goSelfPayment">
					<view class="iconfont icon-zizhujiaofei" style="color: #41a3f4;"></view>
					<text>自助缴费</text>
				</view>
				<!-- 门诊费用 -->
				<view class="box" @click="goCoutpatientCare">
					<view class="iconfont icon-menzhenfeiyong" style="color: #ea877a;"></view>
					<text>门诊费用</text>
				</view>
				<!-- 在线退款 -->
				<view class="box" @click="goRefundOnline">
					<view class="iconfont icon-tuikuan" style="color: #62bbae;"></view>
					<text>在线退款</text>
				</view>
			</view>
			<view class="row-two">
				<!-- 报告查询 -->
				<view class="box" @click="goReportSel">
					<view class="iconfont icon-baogaochaxun" style="color:#62bbae"></view>
					<text>报告查询</text>
				</view>
				<!-- 病例查询 -->
				<view class="box" @click="goCaseHistory">
					<view class="iconfont icon-bingli" style="color: #41a3f4;"></view>
					<text>病例查询</text>
				</view>
				<!-- 核酸检测 -->
				<view class="box" @click="goSelPerson">
					<view class="iconfont icon-hesuanjiance" style="color: #62bbae;"></view>
					<text>核酸检测</text>
				</view>
				<!-- 体检服务 -->
				<view class="box" @click="goSelExaminer">
					<view class="iconfont icon-tijianfuwu" style="color: #41a3f4;"></view>
					<text>体检服务</text>
				</view>
			</view>
		</view>
		<!-- 住院服务 -->
		<Tag title="住院服务"></Tag>
		<view class="Hospitalization">
			<view class="row-one">
				<!-- 住院充值 -->
				<view class="box" @click="goSelHospitalPerson">
					<view class="iconfont icon-chongzhi" style="color: #41a3f4;"></view>
					<text>住院充值</text>
				</view>
				<!-- 住院费用 -->
				<view class="box" @click="goSel">
					<view class="iconfont icon-zhuyuanfeiyongx" style="color: #62bbae;"></view>
					<text>住院费用</text>
				</view>
				<!-- 住院日清单 -->
				<view class="box" @click="goChecklist">
					<view
						class="iconfont icon-zhuyuanriqingdanchaxunbeifen" style="color: #ea877a;"
					></view>
					<text>住院日清单</text>
				</view>
				<!-- 病案寄送 -->
				<view class="box" @click="goMattersAttention">
					<view class="iconfont icon-peijianjisong" style="color: #41a3f4;"></view>
					<text>病案寄送</text>
				</view>
			</view>
		</view>
		<!-- 医院服务 -->
		<Tag title="医院服务"></Tag>
		<view class="Hospital">
			<view class="row-one">
				<!-- 医院介绍 -->
				<view class="box" @click="goHospitalIntro">
					<view class="iconfont icon-hospital-full" style="color: #f18071;"></view>
					<text>医院介绍</text>
				</view>
				<!-- 医院导航 -->
				<view class="box" @click="goSelArea">
					<view class="iconfont icon-daohang" style="color: #50a3e9;"></view>
					<text>医院导航</text>
				</view>
				<!-- 就医指南 -->
				<view class="box" @click="goGuide">
					<view class="iconfont icon-jiuyizhinan" style="color: #a692ee;"></view>
					<text>就医指南</text>
				</view>
				<!-- 健康百科 -->
				<view class="box" @click="goEncyclopedia">
					<view class="iconfont icon-jiankangbaike" style="color: #62bbae;"></view>
					<text>健康百科</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import Tag from '@/components/tag.vue'
import { ref, onMounted, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// 轮播图数据部分
let movePic = reactive({
	indicatorDots: true,
	autoplay: true,
	interval: 2000,
	duration: 500
})
let changeIndicatorDots = e => {
	movePic.indicatorDots = !movePic.indicatorDots
}
let changeAutoplay = e => {
	movePic.autoplay = !movePic.autoplay
}
let intervalChange = e => {
	movePic.interval = e.target.value
}
let durationChange = e => {
	movePic.duration = e.target.value
}
// 预约挂号页面跳转
let goDoctorChoose = () => {
	uni.navigateTo({
		url: '/pages/appointmentRegister/doctorChoose/doctorChoose'
	})
}
// 在线充值跳转
let goOnine = () => {
	uni.navigateTo({
		url: '/pages/TopUpOnline/OutpatientTopUp/OutpatientTopUp'
	})
}
// 候诊查询
let goWaitConsultation = () => {
	uni.navigateTo({
		url: '/pages/waitConsulation/waitConsulation/waitConsulation'
	})
}
// 自助缴费
let goSelfPayment = () => {
	uni.navigateTo({
		url: '/pages/selfPayment/selfPayment/selfPayment'
	})
}
// 门诊费用
let goCoutpatientCare = () => {
	uni.navigateTo({
		url: '/pages/outpatientCare/outpatientCare/outpatientCare'
	})
}
// 在线退款
let goRefundOnline = () => {
	uni.navigateTo({
		url: '/pages/refundOnline/refundOnline'
	})
}
// 报告查询
let goReportSel = () => {
	uni.navigateTo({
		url: '/pages/reportSel/reportType/reportType'
	})
}
// 病例查询
let goCaseHistory = () => {
	uni.navigateTo({
		url: '/pages/caseHistory/caseHistory/caseHistory'
	})
}
// 核酸检测
let goSelPerson = () => {
	uni.navigateTo({
		url: '/pages/nucleicAcidTesting/selPerson/selPerson'
	})
}
// 体检服务
let goSelExaminer = () => {
	uni.navigateTo({
		url: '/pages/examinationService/selExaminer/selExaminer'
	})
}
// 住院充值
let goSelHospitalPerson = () => {
	uni.navigateTo({
		url: '/pages/hospitalRecharge/selHospitalPerson/selHospitalPerson'
	})
}
// 住院费用
let goSel = () => {
	uni.navigateTo({
		url: '/pages/personHospital/selectPerson/selectPerson'
	})
}
// 住院日清单
let goChecklist = () => {
	uni.navigateTo({
		url: '/pages/checklist/checklist'
	})
}
// 病案寄送
let goMattersAttention = () => {
	uni.navigateTo({
		url: '/pages/recordSend/mattersAttention/mattersAttention'
	})
}
// 医院介绍
let goHospitalIntro = () => {
	uni.navigateTo({
		url: '/pages/hospitalIntro/hospitalIntro'
	})
}
// 医院导航
let goSelArea = () => {
	uni.navigateTo({
		url: '/pages/hospitalNav/selArea/selArea'
	})
}
// 就医指南
let goGuide = () => {
	uni.navigateTo({
		url: '/pages/guide/guide/guide'
	})
}
// 健康百科
let goEncyclopedia = () => {
	uni.navigateTo({
		url: '/pages/encyclopedia/encyclopedia/encyclopedia'
	})
}

onMounted(() => {})

onShow(() => {})
</script>

<style lang="less" scoped="">
.index {
	margin: 30rpx;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-item {
	width: 680rpx;
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	border-radius: 30rpx;
	font-size: 36rpx;
	color: #fff;
	background-image: linear-gradient(to right, #026efe, #809df9);
}

.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}

.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}

.info {
	position: absolute;
	right: 20rpx;
}

.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}

.Outpatient {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;

	.OutpatientService {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.OutpatientBox {
			width: 310rpx;
			height: 120rpx;
			background-color: #fbefef;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.content {
				height: 92rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.text1 {
					color: #f5909d;
					font-size: 32rpx;
				}
				.text2 {
					font-size: 22rpx;
					color: #c28c89;
				}
			}
			.iconOut {
				width: 92rpx;
				height: 92rpx;
				background-color: #fad3d4;
				border-radius: 46rpx;
				font-size: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.onine {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.onineBox {
			width: 310rpx;
			height: 120rpx;
			background-color: #ecf9f2;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.content {
				height: 92rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.text1 {
					color: #3bc07a;
					font-size: 32rpx;
				}
				.text2 {
					font-size: 22rpx;
					color: #7ccea2;
				}
			}
			.iconOut {
				width: 92rpx;
				height: 92rpx;
				background-color: #c2f2da;
				border-radius: 46rpx;
				font-size: 46rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.Outpatient-bottom {
	display: flex;
	flex-direction: column;
	align-items: space-between;
	justify-content: center;
	.row-one,
	.row-two {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.box {
			width: 152rpx;
			height: 152rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10rpx 7rpx;
			justify-content: center;
			background-color: #fff;
			border-radius: 5px;
			// box-shadow: 2rpx 2rpx 10rpx 2rpx #eee;
			.iconfont {
				width: 68rpx;
				height: 68rpx;
				background-color: #fff;
				border-radius: 34rpx;
				color: #026efe;
				font-size: 42rpx;
				text-align: center;
				line-height: 68rpx;
			}
			text {
				font-size: 25rpx;
				margin-top: 18rpx;
			}
		}
	}
}
.Hospitalization {
	.row-one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.box {
			width: 152rpx;
			height: 152rpx;
			// border: 2rpx solid #eee;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20rpx 7rpx;
			justify-content: center;
			// box-shadow: 2rpx 2rpx 10rpx 2rpx #eee;
			border-radius: 5px;
			.iconfont {
				width: 68rpx;
				height: 68rpx;
				background-color: #fff;
				border-radius: 28rpx;
				color: #43c27f;
				font-size: 42rpx;
				text-align: center;
				line-height: 68rpx;
			}
			text {
				font-size: 25rpx;
				margin-top: 18rpx;
			}
		}
	}
}
.Hospital {
	.row-one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.box {
			width: 152rpx;
			height: 152rpx;
			// border: 2rpx solid #eee;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 20rpx 7rpx;
			justify-content: center;
			// box-shadow: 2rpx 2rpx 10rpx 2rpx #eee;
			border-radius: 5px;
			.iconfont {
				width: 68rpx;
				height: 68rpx;
				background-color: #fff;
				border-radius: 28rpx;
				color: #f69ea9;
				font-size: 42rpx;
				text-align: center;
				line-height: 68rpx;
			}
			text {
				font-size: 25rpx;
				margin-top: 18rpx;
			}
		}
	}
}
</style>
